import { useEffect, useState } from 'react'
import { getHighlighter, setCDN } from 'shiki'

export function useShiki(previewStr: string) {
  const [code, setCode] = useState('')

  function setCodeHighlighter() {
    setCDN('https://cdn.jsdelivr.net/npm/shiki')
    getHighlighter({ theme: 'one-dark-pro', langs: ['jsx'] })
      .then((h) => {
        const html = h.codeToHtml(previewStr, { lang: 'jsx' })
        setCode(html)
      })
      .catch((error) => {
        setCode(error)
      })
  }

  useEffect(() => {
    setCodeHighlighter()
  }, [])

  return code
}
